
<template>
	<view class="my">
		<view class="top" v-if="!userInfo._id">
			<view class="top-head">
				<u-avatar @click="goLogin" size="70"></u-avatar>
				<view @click="goLogin">登陆</view>
			</view>
			<!-- <view class="shouhuo">
				<u-icon name="map-fill" color="white" size="26"></u-icon>
				<view>收货地址</view>
			</view> -->
		</view>
		<view class="top" v-else>
			<view class="top-head">
				<u-avatar :src="userInfo.avatar" size="70"></u-avatar>
				<view class="nickname">{{userInfo.nickname || '兔叽叽用户'}}</view>
				<view>
					<u-icon name="reload" color="white" @click="reloadUserInfo"></u-icon>
				</view>
			</view>
			<!-- <view class="shouhuo">
				<u-icon name="map-fill" color="white" size="26"></u-icon>
				<view>收货地址</view>
			</view> -->
			<view class="setting" v-if="userInfo._id" @click="setUserInfo">
				<u-icon name="setting" color="white" size="30"></u-icon>
			</view>
		</view>
		<view class="bottom">
			<view class="list-cell">
				<view class="title">
					<view class="text">我的订单</view>
					<view class="more" @click="goMore()">查看更多
						<u-icon name="arrow-right" color="#cbcbcb"></u-icon>
					</view>
				</view>
				<view class="item-list">
					<view class="item" v-for="item,index in order_status_list" :key="item.title" @click="goMore(item.status)">
						<u-badge type="error" max="99" :value="item.count" absolute :offset="[0,0]"></u-badge>
						<u-icon :name="item.icon" size="36"></u-icon>
						<view>
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
				<view class="list-cell" v-if='vk.vuex.get("$user.userInfo.role[0]")'>
					<view class="title">
						<view class="text">我的服务</view>
				</view>

				<view class="item-list">
					<view class="item" v-for="item,index in writeoff_list" :key="item.title" @click="writeOff()">
						<u-icon :name="item.icon" size="36"></u-icon>
						<view>
							{{item.title}}
						</view>
					</view>
				</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.getStatusGroup()
		},
		computed: {
			userInfo() {
				return this.$store.state.$user.userInfo
			}
		},
		data() {
			return {
				order_status_list: [{
					title: "全部订单",
					icon: 'order',
					status: 'all'
				}, {
					title: "待付款",
					icon: 'bag',
					status: 0
				}, {
					title: "待领取",
					icon: "bag-fill",
					status: 1
				}, {
					title: "待归还",
					icon: 'bookmark',
					status: 2
				}, {
					title: "已归还",
					icon: 'bookmark-fill',
					status: 3
				}],
				writeoff_list: [{
					title: "订单核销",
					icon: "scan",
				}]
			}
		},
		methods: {
			reloadUserInfo(){
				vk.userCenter.getCurrentUserInfo({
				  success: (res) => {
				    // 成功后的逻辑
					console.log(res)
					vk.vuex.set("$user.userInfo",res.userInfo)
				  }
				});
			},
			goMore(status='all') {
				uni.navigateTo({
					url: `/pages/order/order_list/order_list?status=${status}`
				})
			},
			async getStatusGroup() {
				vk.callFunction({
					url: '/client/pages/order/kh/get_status_group',
					success: (res) => {
						console.log('res', res)
						let count = 0
						res.data.count_info.forEach((item) => {
							count += item.count
							let cur_index = this.order_status_list.findIndex((items) => items
								.status == item.status)
							this.$set(this.order_status_list[cur_index], 'count', item.count)
						})
						
						let cur_index = this.order_status_list.findIndex((items) => items
							.status == 'all')
						this.$set(this.order_status_list[cur_index], 'count', count)

					}
				});
			},
			setUserInfo() {
				uni.navigateTo({
					url: '/pages/my/set-user-info/set-user-info'
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/my/login/login'
				})
			},
			loginByWeixin() {
				console.warn('猜你妹')
				let that = this;
				vk.userCenter.loginByWeixin({

					success: (data) => {
						vk.alert(data.msg);
						that.data = data;
					}
				});
			},
			writeOff() {
				console.log('核销')
				// 允许从相机和相册扫码
				uni.navigateTo({
					url: `/pages/my/write-off/write-off`,

				})
			}
		}
	}
</script>

<style scoped lang="less">
	
	.my::before{
		content: 'Version 0.0.41';
		color: #F3F3F3;
		font-size: 24rpx;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		text-shadow: -1px -1px #fff, -2px -2px #d4d4d4, 1px 1px #fff, 2px 2px #eee;
	}
	.my {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		height: 300rpx;
		background-image: url(/static/images/my_bg.png);
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		color: white;
		justify-content: space-between;
		box-sizing: border-box;

		.top-head {
			display: flex;
			gap: 20rpx;
			align-items: center;

			.nickname {
				max-width: 400rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.setting {
			padding-right: 40rpx;
		}

		.shouhuo {
			background-color: #FF4544;
			border-radius: 80rpx 0 0 80rpx;
			display: flex;
			align-items: center;
			padding: 12rpx;
		}
	}

	.bottom {
		// flex-grow: 0.3;
		flex-grow: 1;
		box-sizing: border-box;
		// height: 0;
		padding: 25rpx;
		background-color: #f3f3f3;

		.list-cell {
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			padding: 20rpx;
			background-color: white;
			box-shadow: 0 0 5rpx rgba(163, 163, 163, 0.2);

			.title {
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.more {
					color: #cbcbcb;
					display: flex;
					align-items: center;
				}
			}

			.item-list {
				display: grid;
				align-items: center;
				justify-content: space-around;
				grid-template-columns: repeat(5, 1fr);
				margin-top: 20rpx;

				.item {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					gap: 10rpx;
					font-size: 24rpx;

					/deep/ .u-badge {
						z-index: 1;
					}
				}
			}
		}
	}

	.servicesBtn {
		flex-grow: 1;
		box-sizing: border-box;
		height: 0;
		padding: 25rpx;
		background-color: #f3f3f3;

		.list-cell {
			border-radius: 10rpx;
			padding: 20rpx;
			background-color: white;
			box-shadow: 0 0 5rpx rgba(163, 163, 163, 0.2);

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.more {
					color: #cbcbcb;
					display: flex;
					align-items: center;
				}
			}

			.item-list {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-top: 20rpx;
				padding: 25rpx;

				.item {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					gap: 10rpx;
					font-size: 24rpx;

					/deep/ .u-badge {
						z-index: 1;
					}
				}
			}
		}
	}
</style>